class Car {
    constructor() {
        this.table = document.querySelector(".table");
        this.tbody = document.querySelector("tbody");
        this.total = document.querySelector(".total");
        this.js = document.querySelector(".js");
        this.number = document.querySelector("#num");
        // this.add = document.querySelector(".add");
        // console.log(this.add)
        // console.log(this.table)
        this.url = "http://localhost/ic/goods/data/goods.json";
        this.load()
    }
    load() {
        ajaxGet(this.url, (res) => {
            this.res = JSON.parse(res);
            // console.log(res)
            this.getData();
        })

    }
    getData() {
        // console.log(this.res)
        this.goodsMsg = getCookie("goodsMsg") ? JSON.parse(getCookie("goodsMsg")) : [];
        this.display();
    }
    display() {
        let str = '';
        let str2 = '';
        let str3 = 0;
        var sum = 0;
        // console.log(this.res)
        // console.log(this.goodsMsg)
        for (var i = 0; i < this.res.length; i++) {
            for (var j = 0; j < this.goodsMsg.length; j++) {
                if (this.res[i].goodsId === this.goodsMsg[j].id) {
                    // console.log(this.res[i])
                    str += `
                    
                    <tr index="${this.res[i].goodsId}">

                    <td><input type="checkbox"></td>

                    <td><img src="${this.res[i].url}" alt=""></td>

                    <td>${this.res[i].name}
                    </td>                   

                    <td class="num">
                    <span class="reduce">-</span><input class="text"    value="${this.goodsMsg[j].num}"><span class="add">+</span>
                    </td>

                    <td>价格${this.res[i].price}</td>
                    <td class="xiaoji">${this.goodsMsg[j].num*this.res[i].price}</td>
                    <td><input type="button" value="删除" class="delete"></td>
    
                </tr>`;
                    // console.log()
                    // console.log(this.goodsMsg[j].num * this.res[i].price)

                    str2 = parseInt(this.goodsMsg[j].num * this.res[i].price)
                    sum += str2;
                    str3 += parseInt(this.goodsMsg[j].num);
                }
            }
        }
        this.tbody.innerHTML = str;
        this.total.innerHTML = sum;
        this.number.innerHTML = str3;
        this.addEvent();
    }
    addEvent() {
        // console.log(1)
        let that = this;
        this.table.addEventListener("click", function(eve) {

            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if (tar.className == "add") {
                that.id = tar.parentNode.parentNode.getAttribute("index");
                // console.log(that.id)
                that.val = tar.previousElementSibling.getAttribute("value");
                that.addData()
            }
            if (tar.className == "reduce") {
                that.id = tar.parentNode.parentNode.getAttribute("index");
                // console.log(that.id)
                that.val = tar.nextElementSibling.getAttribute("value");
                that.reduceData()
            }
            if (tar.className === "delete") {

                that.id = tar.parentNode.parentNode.getAttribute("index");

                // console.log(that.id)
                that.delete(function(i) {
                    that.goodsMsg.splice(i, 1);
                });
                tar.parentNode.parentNode.remove();
                this.display();
            }


        })
    }
    addData() {
        let i;
        this.goodsMsg.some((val, idx) => {
            i = idx;
            return val.id === this.id;
        })
        this.goodsMsg[i].num = parseInt(this.val) + 1;
        setCookie("goodsMsg", JSON.stringify(this.goodsMsg));
        this.display();
    }
    reduceData() {
        let i;
        this.goodsMsg.some((val, idx) => {
            i = idx;
            return val.id === this.id;
        })
        if (this.val > 1) {

            this.goodsMsg[i].num = parseInt(this.val) - 1;
        } else {
            this.goodsMsg[i].num = 1;
        }
        setCookie("goodsMsg", JSON.stringify(this.goodsMsg));
        this.display();
    }
    delete(cb) {
        let i;
        this.goodsMsg.some((val, idx) => {
            i = idx;
            return val.id === this.id;
        })
        cb(i)

        setCookie("goodsMsg", JSON.stringify(this.goodsMsg));


    }
}
new Car();
// 小计的值 = 数量 * 每个的单价
// 默认全选，取消全选，所有的全选都会取消
// 取消某个选择框，不参与计费,全选框取消选择